<template>
    <div style="padding: 20px">
        <a-row type="flex">
            <a-col :flex="5">
                <div>
                    <a-input-search
                            v-model:value="value"
                            placeholder="input search text"
                            style="width: 200px"
                            @search="onSearch"
                    />

                </div>
                <div>
                    <a-list item-layout="horizontal" :data-source="data" :pagination="pagination">
                        <template #renderItem="{ item }">
                            <a-list-item>
                                <template #actions>
                                    <a>删除</a>
                                </template>
                                <a-list-item-meta
                                        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                                >
                                    <template #title>
                                        <span>{{ item.title }}</span>
                                    </template>
                                    <template #avatar>
                                        <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                    </template>
                                </a-list-item-meta>
                                <div>日期</div>
                            </a-list-item>
                        </template>
                    </a-list>
                </div>
            </a-col>
            <a-col :flex="1" class="last-flet">
                <span>最近联系人</span>
            </a-col>
        </a-row>

    </div>
</template>

<script lang="ts">
    import { defineComponent, ref } from 'vue';

    interface DataItem {
        title: string;
    }
    const data: DataItem[] = [
        {
            title: 'Ant Design Title 1',
        },
        {
            title: 'Ant Design Title 2',
        },
        {
            title: 'Ant Design Title 3',
        },
        {
            title: 'Ant Design Title 4',
        },
    ];

    export default defineComponent({
        setup() {
            const pagination = {
                onChange: (page: number) => {
                    console.log(page);
                },
                pageSize: 10,
            };

            return {
                data,
                pagination
            }
        }
    });
</script>

<style scoped>
    .last-flet {
        padding-left: 20px;
    }

    .last-flet span {
        font-weight: bold;
    }
</style>